<template>
  <div class="pagination">
    <!-- 根据 start end 动态渲染分页器的元素 -->
    <button
      :disabled="pageNo === 1"
      @click="$emit('updatePageNoEvent', pageNo - 1)"
    >
      上一页
    </button>
    <button
      v-show="continuousPagingStatrAndEnd.start > 1"
      @click="$emit('updatePageNoEvent', 1)"
      :class="{ active: pageNo === 1 }"
    >
      1
    </button>

    <button v-show="continuousPagingStatrAndEnd.start > 2">···</button>

    <!-- 
      v-for 不能和 v-if 连用，存在性能问题：
        v-for 的优先级高于 v-if 所以 v-for 会先渲染所有的元素，然后 v-if 在销毁不满足条件的元素，这就造成了渲染很多不必要的元素
     -->
    <!-- <button
      v-for="page in continuousPagingStatrAndEnd.end"
      :key="page"
      v-if="page < continuousPagingStatrAndEnd.start"
    >
      {{ page }}
    </button> -->

    <!-- 优化一：(只是优化报错层面的，并没有解决性能问题) -->
    <!-- <span v-for="page in continuousPagingStatrAndEnd.end" :key="page">
      <button v-if="page >= continuousPagingStatrAndEnd.start">
        {{ page }}
      </button>
    </span> -->

    <!-- 优化二：先通过计算属性，对数据进行处理(相当于 v-if) -->
    <button
      v-for="page in continuousPagingRenderData"
      :key="page"
      @click="$emit('updatePageNoEvent', page)"
      :class="{ active: pageNo === page }"
    >
      {{ page }}
    </button>

    <button v-show="continuousPagingStatrAndEnd.end < totalPages - 1">
      ···
    </button>
    <button
      v-show="continuousPagingStatrAndEnd.end < totalPages"
      @click="$emit('updatePageNoEvent', totalPages)"
      :class="{ active: pageNo === totalPages }"
    >
      {{ totalPages }}
    </button>
    <button
      :disabled="pageNo === totalPages"
      @click="$emit('updatePageNoEvent', pageNo + 1)"
    >
      下一页
    </button>

    <button style="margin-left: 30px">共 {{ total }} 条</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "totalPages", "total"],
  data() {
    return {
      continuousPaging: 5,
    };
  },
  computed: {
    // 动态计算连续分页的开始结束位置
    continuousPagingStatrAndEnd() {
      let end = 0,
        start = 0;

      const { continuousPaging, totalPages, pageNo } = this;

      if (continuousPaging >= totalPages) {
        // 连续分页大于等于数据总页数(不满足连续分页的条件)
        start = 1;
        end = totalPages;
      } else {
        // 连续分页小于数据总页数(满足连续分页的条件)
        // 1. 取连续分页的中间值
        const median = Math.floor(continuousPaging / 2);
        // 2.根据中间值计算 start 和 end
        start = pageNo - median;
        end = pageNo + median;
        // 3. 判断 start 和 end 数值越界
        if (start < 1) {
          // 3.1 start 小于一(起始位置越界)
          (start = 1), (end = continuousPaging);
        } else if (end > totalPages) {
          // 3.2 end 大于数据总页数(结束位置越界)
          end = totalPages;
          start = totalPages - continuousPaging + 1;
        }
      }
      return {
        start,
        end,
      };
    },
    // 连续分页渲染数据
    continuousPagingRenderData() {
      const arr = [];
      /* console.log(
        this.continuousPagingStatrAndEnd.end,
        "this.continuousPagingStatrAndEnd.end"
      ); */
      for (let i = 1; i <= this.continuousPagingStatrAndEnd.end; i++) {
        if (i >= this.continuousPagingStatrAndEnd.start) {
          arr.push(i);
        }
      }
      return arr;
    },
  },
  methods: {},
  mounted() {
    /* console.log(this.pageNo, "pageNo")
    console.log(this.totalPages, "totalPages")  // totalPages 是请求过来的数据，是异步的 */
    setTimeout(() => {
      console.log(this.pageNo, "pageNo");
      console.log(this.totalPages, "totalPages");
      console.log(
        this.continuousPagingStatrAndEnd,
        "continuousPagingStatrAndEnd"
      );
      console.log(
        this.continuousPagingRenderData,
        "continuousPagingRenderData"
      );
    }, 2000);
  },
};
</script>

<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>
